<template>
	<el-card>
		<div class="userdetails">
			<div class="datas">
				<div class="item">
					<div class="title">个人信息</div>
					<div class="listBox">
						<div class="list">
							<div class="title">用户头像：</div>
							<div class="cont">
								<el-image
									:src="userInfo.head_img"
									:preview-src-list="[userInfo.head_img]"
									fit="cover"
									class="contimg"
								/>
							</div>
						</div>
						<div class="list" style="margin-bottom: 0">
							<div class="litembox">
								<div class="litem">
									<div class="title">用户昵称：</div>
									<div class="cont">
										{{ userInfo.nick_name }}
									</div>
								</div>
								<div class="litem">
									<div class="title">用户等级：</div>
									<div class="cont">
										<span v-if="userInfo.level_num == '0'">普通用户</span>
										<span v-if="userInfo.level_num == '1'">青铜用户</span>
										<span v-if="userInfo.level_num == '2'">白银用户</span>
										<span v-if="userInfo.level_num == '3'">黄金用户</span>
										<span v-if="userInfo.level_num == '4'">钻石用户</span>
									</div>
								</div>
								<div class="litem">
									<div class="title">成长值：</div>
									<div class="cont">
										{{ userInfo.growth_num }}
									</div>
								</div>
							</div>
						</div>
						<div class="list">
							<div class="title">用户姓名：</div>
							<div class="cont">
								{{ userInfo.user_name ? userInfo.user_name : '用户未填写姓名' }}
							</div>
						</div>
						<div class="list">
							<div class="title">用户电话：</div>
							<div class="cont">
								{{ userInfo.phone_num ? userInfo.phone_num : '用户未填写电话' }}
							</div>
						</div>
						<div class="list">
							<div class="title">归属地：</div>
							<div class="cont">
								{{
									userInfo.native_place ? userInfo.native_place : '用户未填写电话'
								}}
							</div>
						</div>
						<div class="list">
							<div class="title">用户日薪：</div>
							<div class="cont">
								{{ Number(userInfo.daily_wage).toFixed(2) }} 元/天
							</div>
						</div>
						<div class="list">
							<div class="title">用户时薪：</div>
							<div class="cont">
								{{ Number(userInfo.hourly_wage).toFixed(2) }} 元/小时
							</div>
						</div>
						<div class="list">
							<div class="title">整日工时：</div>
							<div class="cont">
								{{ Number(userInfo.day_manhour).toFixed(2) }} 小时/整天
							</div>
						</div>
					</div>
					<div class="backBtn">
						<el-button type="primary" @click="router.back()">返回上一页</el-button>
					</div>
				</div>
				<div class="item">
					<div class="title">每月工作天数(天)</div>
					<div class="echarts" ref="mandayDom"></div>
				</div>
				<div class="item">
					<div class="title">每月加班时长(小时)</div>
					<div class="echarts" ref="overtimeDom"></div>
				</div>
				<div class="item">
					<div class="title">每月预支工资(次)</div>
					<div class="echarts" ref="advanceDom"></div>
				</div>
			</div>
		</div>
	</el-card>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted, reactive } from 'vue';
import { getUserdetails } from '@/utils/api';
const route = useRoute();
const router = useRouter();

type EChartsOption = echarts.EChartsOption;
const mandayDom: any = ref(null);
const overtimeDom: any = ref(null);
const advanceDom: any = ref(null);
var mandayChart: any = null;
var overtimeChart: any = null;
var advanceChart: any = null;
var option: EChartsOption;
const userInfo: any = ref({});
onMounted(() => {
	setTimeout(() => {
		getPageData();
	}, 100);
});
const getPageData = () => {
	getUserdetails({
		userid: (route as any).params.id,
		year: 2024,
	}).then((res: any) => {
		console.log(res);
		userInfo.value = res.data.userInfo;
		chartDatas(res.data.manday, 'mandayDom');
		chartDatas(res.data.overtime, 'overtimeDom');
		chartDatas(res.data.advance, 'advanceDom');
	});
};
const chartDatas = (data: any, type: string) => {
	if (type == 'mandayDom') {
		if (mandayChart == null) {
			mandayChart = echarts.init(mandayDom.value);
		}
	}
	if (type == 'overtimeDom') {
		if (overtimeChart == null) {
			overtimeChart = echarts.init(overtimeDom.value);
		}
	}
	if (type == 'advanceDom') {
		if (advanceChart == null) {
			advanceChart = echarts.init(advanceDom.value);
		}
	}
	option = {
		xAxis: {
			type: 'category',
			data: data.month,
		},
		tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
		yAxis: {
			type: 'value',
		},
		series: [
			{
				data: data.data,
				type: 'bar',
				itemStyle: {
					// 修改柱子的颜色
					color:
						type == 'mandayDom'
							? '#65B581'
							: type == 'overtimeDom'
							? '#FFCE34'
							: '#FD665F',
				},
			},
		],
	};
	if (type == 'mandayDom') {
		option && mandayChart.setOption(option);
	}
	if (type == 'overtimeDom') {
		option && overtimeChart.setOption(option);
	}
	if (type == 'advanceDom') {
		option && advanceChart.setOption(option);
	}

	window.addEventListener('resize', function () {
		mandayChart.resize();
		overtimeChart.resize();
		advanceChart.resize();
	});
};
</script>
<style scoped lang="scss">
.userdetails {
	.datas {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		.item {
			width: 50%;
			margin-bottom: 20px;
			.title {
				width: 100%;
				text-align: center;
				font-size: 16px;
				font-weight: bold;
			}
			.echarts {
				width: 100%;
				height: 400px;
			}
			.listBox {
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 20px;
				// position: relative;
				// left: 50%;
				// transform: translateX(-50%);
				// margin-left: 10%;
				.list {
					width: 35%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 20px;
					// .litembox {
					// }
					.litem {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 20px;
					}
					.title {
						width: 80px;
						text-align: right;
						font-weight: 400;
					}
					.cont {
						color: #999;
						.contimg {
							width: 100px;
							height: 100px;
							border-radius: 5px;
						}
					}
				}
			}
			.backBtn {
				text-align: center;
				margin-top: 40px;
			}
		}
	}
}
</style>
